import React, {Component} from 'react';
import TheCarousel from "../../components/TheCarousel";
import {Card, Tabs, WingBlank, WhiteSpace, PullToRefresh, ListView,} from 'antd-mobile';
import MovieList from "../../components/MovieList";
import {CaretDownOutlined, GithubOutlined} from "@ant-design/icons";
import './Movie.scss'
import SearchNav from "../../components/SearchNav";
import http from "../../util/http";


//list常量
const NUM_ROWS = 1;
let pageIndex = 0;

//初始化数据量数组，增加数据量数组
function genData(pIndex = 0) {
    const dataArr = [];
    for (let i = 0; i < NUM_ROWS; i++) {
        dataArr.push(`row - ${(pIndex * NUM_ROWS) + i}`);
    }
    return dataArr;
}


class Movie extends Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            //控制数据更新  这句代码是用来控制item数据的更新,当且仅当任意两行数据不相等时才去更新...
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            tabs: [],
            initialPage: 0,
            typeId: 0,
            isPage: false,
            dataSource,
            refreshing: true,
            isLoading: true,
            height: document.documentElement.clientHeight,
            useBodyScroll: false,
        }
    }



    componentDidMount() {
        http.get("api/movie/type/list").then(({data}) => {
            if (data.code === 200) {
                this.setState({
                    tabs: data.data.list,
                    typeId: data.data.list.typeId
                }, () => {
                })
            } else {
                alert(data.msg)
            }
        })
        const hei = this.state.height - 280;
        this.rData = genData();
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(genData()),
            height: hei,
            refreshing: false,
            isLoading: false,

        });
        if (this.props.location.state) {
            this.setState({
                    initialPage: this.props.location.state.initialPage,
                    typeId: this.props.location.state.typeId,
                }
            )
        }
        this.setState({
                isPage: true
            }
        )
    }

    onChange = (tab, index) => {
        pageIndex = 0;
        this.setState({
                typeId: tab.id,
                initialPage: index
            }
        )
        this.onRefresh()
    };
    //刷新函数
    onRefresh = () => {
        this.setState({refreshing: true, isLoading: true});
        // 模拟初始Ajax
        setTimeout(() => {
            this.rData = genData();
            this.setState({
                //想要更新datasource中的数据，必须每次通过cloneWithRows这个来重新挂载datasource的值。
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                refreshing: false,
                isLoading: false,
            });
        }, 10);
    };

    //下拉回调函数
    onEndReached = (event) => {
        if (this.state.isLoading) {
            return;
        }
        this.setState({isLoading: true});
        setTimeout(() => {
            this.rData = [...this.rData, ...genData(++pageIndex)];
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            });
        }, 1000);
    };

    renderMovieList = (tab, index) => {
        const row1 = () => {
            const pageInfo = {
                typeId: this.state.typeId,
                page: pageIndex + 1
            }

            return (
                <div>
                    <MovieList movieapi={"api/movie/list"} pageInfo={pageInfo}/>
                </div>
            )
        }
        return (
            <WingBlank>
                <Card full={true}>
                    <Card.Body>
                        <ListView
                            key={1}
                            ref={el => this.lv = el}
                            dataSource={this.state.dataSource}
                            renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>
                                {this.state.isLoading ? '加载中...' : '加载完成'}
                            </div>)}
                            renderRow={row1}
                            style={{
                                height: this.state.height,
                                margin: '5px 0'
                            }}
                            pullToRefresh={<PullToRefresh
                                refreshing={this.state.refreshing}
                                indicator={this.state.down ? {} : {deactivate: '下拉可以刷新'}}
                                onRefresh={this.onRefresh}
                            />}
                            onEndReached={this.onEndReached}
                            onEndReachedThreshold={10}
                            pageSize={1}
                        />
                    </Card.Body>
                </Card>
            </WingBlank>
        )
    }

    render() {
        const tablist = this.state.tabs.map(item => {
                return {
                    title: item.typeName,
                    id: item.typeId
                }
            }
        )
        return (
            this.state.tabs.length ?
                <div className={"Movie"}>
                    <div className={"top"}>
                        <div className={"SearchNav"}>
                            <div className={"left"}>
                                <GithubOutlined className={"icon"}/>
                                &nbsp;南京
                                <CaretDownOutlined/>
                            </div>
                            <div className={"right"}>
                                <SearchNav history={this.props.history}/>
                            </div>
                        </div>
                    </div>
                    <div className={"main"}>
                        <WingBlank>
                            <WhiteSpace/>
                            <TheCarousel movieapi={"/api/banner/movie"}/>
                        </WingBlank>
                        <WhiteSpace/>
                        <div>
                            <Tabs tabs={tablist}
                                  prerenderingSiblingsNumber={2}
                                  initialPage={this.state.initialPage}
                                  onChange={(tab, index) => {
                                      this.onChange(tab, index)
                                  }}
                                  renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4}/>}>
                                {
                                    this.renderMovieList()
                                }
                            </Tabs>
                        </div>
                    </div>
                </div> : <></>
        );
    }
}

export default Movie;
